<!--
 * @Author: your name
 * @Date: 2022-01-17 12:03:47
 * @LastEditTime: 2022-01-20 23:21:43
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\VueStudy\vue-test4\vue-eqidemic\src\views\Home.vue
-->
<template>
  <div class="home">
    <!-- 疫情图片 -->
    <div class="logo">
        <img src="../assets/images/1.jpg" width="100%" alt="" srcset="">
        <!-- 点击进入城市选择 -->
        <router-link class="select" to="/searchcity">{{city}}疫情</router-link>
    </div>
    
    <!-- 病毒信息 -->
    <CovInfo :covData="covData" :newsData="newsData"/>
     <!-- 3. 疫情-小导航 -->
    <div class="list">
      <div>
        <router-link to="/area">
          <img src="../assets/images/1.png" alt="" />
          <div>风险地区</div>
        </router-link>
      </div>
      <div>
        <router-link to="/hesuan">
          <img src="../assets/images/2.png" alt="" />
          <div>核算检测</div>
        </router-link>
      </div>
      <div>
        <router-link to="/prevention">
          <img src="../assets/images/3.png" alt="" />
          <div>防疫物资</div>
        </router-link>
      </div>
      <div>
        <router-link to="/travel">
        <img src="../assets/images/4.png" alt="" />
        <div>出行政策</div>
        </router-link>
      </div>
    </div> 

    <!-- 疫情信息  -->
    <CovData :covDate='covDate'/>

    <!-- 疫情地图 -->
    <ChinaMap />

    <!-- 世界地图 -->
    <WorldMap />

    <!-- //swiper轮播图 -->
    <VueSwiper/>

  </div>
</template>

<script>
import api from '../api/index'
import CovInfo from '../components/CovInfo'
import CovData from '../components/CovData/CovData.vue'
import ChinaMap from '../components/VueEcharts/ChinaMap.vue'
import WorldMap from '../components/VueEcharts/WorldMap.vue'
import VueSwiper from '../components/VueSwiper/VueSwiper.vue'
import bus from '../utils/eventBus'
export default {
  name: 'Home',
  data() {
    return {
      covData:{},
      newsData:[],
      covDate:{}, //全国的与疫情信息统计
      city:''
    }
  },
  components:{
    CovInfo,
    CovData,
    ChinaMap,
    WorldMap,
    VueSwiper
  },
  created() {
    bus.$on('cityDateList',(data) => {
      console.log('-------',data);
      this.city = data
    })

    api.getCovInfo()
    .then((res) => {
      console.log(res.data)
      //病毒信息
      const dataList = res.data.newslist[0].desc
      this.covData = {
        note1:dataList.note1,
        note2:dataList.note2,
        note3:dataList.note3,
        remark1:dataList.remark1,
        remark2:dataList.remark2,
        remark3:dataList.remark3
      },
      //疫情热点
      this.newsData = res.data.newslist[0].news
      //全国疫情的数据统计信息
      this.covDate ={
        currentConfirmedCount: dataList.currentConfirmedCount,
        confirmedCount: dataList.confirmedCount,
        suspectedCount: dataList.suspectedCount,
        curedCount: dataList.curedCount,
        deadCount: dataList.deadCount,
        seriousCount: dataList.seriousCount,
        suspectedIncr: dataList.suspectedIncr,
        currentConfirmedIncr: dataList.currentConfirmedIncr,
        confirmedIncr: dataList.confirmedIncr,
        curedIncr: dataList.curedIncr,
        deadIncr: dataList.deadIncr,
        seriousIncr: dataList.seriousIncr,
        modifyTime: dataList.modifyTime,
      }


       /**
            currentConfirmedCount 现存确诊
            confirmedCount  累计确诊
            suspectedCount  累计境外输入人数
            curedCount    累计治愈人数
            deadCount   累计死亡人数
            seriousCount  现存无症状人数
            suspectedIncr  新增境外输入人数
            currentConfirmedIncr   相比昨日现存确诊人数
            confirmedIncr  相比昨日累计确诊人数
            curedIncr   相比昨日新增治愈人数
            deadIncr  相比昨日新增死亡人数
            seriousIncr 相比昨日现存无症状人数

              modifyTime 时间
             
             */


    })
  },
  destroyed() {
    bus.$off('cityDateList')
  },
}
</script>

<style scoped>
.list {
  display: flex;
  padding-bottom: 0.2rem;
  }
.list   div {
    flex: 1;
    text-align: center;
    color: #666;
   }
.list    img {
      width: 0.8rem;
      height: 0.8rem;
    }
.logo{
  position: relative;
}  
.select{
  position: absolute;
  right: 0.2rem;
  top: 0.3rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
  padding: 0.1rem 0.2rem;
  border-radius: 0.2rem;
}
</style>